<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
	<form class='layui-form'>
		<div class="layui-form-item">
			<label class="layui-form-label"> 房间号</label>
			<div class="layui-input-inline">
				<input type="text" name="number" disabled="disabled"
					class="layui-input">
			</div>
			<label class="layui-form-label">类型</label>
			<div class="layui-input-inline">
				<input type="text" name="type" class="layui-input"
					disabled="disabled">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"> 预退房时间</label>
			<div class="layui-input-inline">
				<input type="text" name="end" id="end" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">预交房费 </label>
			<div class="layui-input-inline">
				<input type="number" name="cost" required lay-verify="required"
					placeholder="输入预交房费" class="layui-input">
			</div>
			<label class="layui-form-label"> 预交押金</label>
			<div class="layui-input-inline">
				<input type="number" name="deposit" required lay-verify="required"
					placeholder="输入预交押金" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item user" id="user-1">
			<label class="layui-form-label">房客:电话号码</label>
			<div class="layui-input-inline">
				<input type="text" name="phone" placeholder="输入电话号码" required
					lay-verify="required" class="layui-input">
			</div>
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="name" placeholder="输入姓名" required
					lay-verify="required" class="layui-input">
			</div>
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-inline">
				<input type="text" name="idcard" placeholder="输入身份证号" required
					lay-verify="required" class="layui-input">
			</div>
			<input type="hidden" name="userId">
		</div>
		<div class="layui-form-item user" id="user-2">
			<label class="layui-form-label">房客:电话号码</label>
			<div class="layui-input-inline">
				<input type="text" name="phone" placeholder="输入电话号码" 
					 class="layui-input">
			</div>
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="name" placeholder="输入姓名" 
					 class="layui-input">
			</div>
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-inline">
				<input type="text" name="idcard" placeholder="输入身份证号" 
					 class="layui-input">
			</div>
			<input type="hidden" name="userId">
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="hidden" name="id">
				<button type="button" class="layui-btn layui-btn-normal" id="add-user">添加房客</button>
				<button class="layui-btn" lay-submit lay-filter="checkin">立即添加</button>
			</div>
		</div>
	</form>

	<script type="text/javascript" src="/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'form', 'layer', 'laydate' ], function() {
			var form = layui.form,
			laydate = layui.laydate,
			layer = layui.layer;
			
			var $ = layui.$;
			var order = JSON.parse(sessionStorage.getItem('order'));
			$("input[name='number']").val(order.room.number);
			$("input[name='type']").val(['大床房','标准间','三人间'][order.room.type]);
			$("input[name='id']").val(order.id);
			$("input[name='end']").val(order.end);
			
			
			$("#add-user").click(function(){
				var div = $("#user-2").clone();
				div.insertAfter("#user-2");
			});
			
			laydate.render({
				elem: '#end',
				type: 'datetime',
			});
			$("form").on('change',"input[name='phone']",function(){
				//var parent = $(this).parent('.user');
			 
				var phone = $(this).val();
				console.log(phone);
				var parent = $(this).parents('.user');
				$.ajax({
					url: '/api/user/search',
					data: {phone:phone},
					type: 'get',
					dataType: 'json',
					success: function(result){
						if(result.code>=0){
							if(result.data && result.data.length>0){
								parent.find("input[name='name']").val(result.data[0].name);
								parent.find("input[name='idcard']").val(result.data[0].idcard);
								parent.find("input[name='userId']").val(result.data[0].id);
							}else{
								parent.find("input[name='userId']").val("");
								layer.msg('未查询到该用户');
							}
						} else{
							layer.msg(result.msg);
						}
					},
					error: function(){
						layer.msg('请求失败');
					}
					
				});
			});
			form.on('submit(checkin)',function(data){
				console.log(data);
				delete data.field.idcard;
				delete data.field.userId;
				delete data.field.phone;
				delete data.field.name;
				delete data.field.number;
				delete data.field.type;
				var users=[];
				$('.user').each(function(){
					var user = {};
					var userId=$(this).find("input[name='userId']").val();
					var name=$(this).find("input[name='name']").val();
					var phone=$(this).find("input[name='phone']").val();
					var idcard = $(this).find("input[name='idcard']").val();
					
					user.id = userId;
					user.name=name;
					user.phone = phone;
					user.idcard = idcard;
					users.push(user);
				});
				data.field.users=users;
				console.log(data.field);
				$.ajax({
					url: '/api/order/checkin',
				    data: JSON.stringify(data.field),
				    contentType: 'application/json; charset=utf-8',
				    type: 'post',
				    dataType: 'json',
				    success: function(result){
				    	if(result.code>0){
				            parent.layer.msg('入住成功');
				            parent.layer.closeAll('iframe');
				    	}else{
				    		layer.msg(result.msg);
				    	}
				    },
				    error: function(){
				    	layer.msg('请求失败');
				    }
				});
				return false;
			});
		});
	</script>
</body>
</html>